<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
	<style>
		.active{
		width:100px;
		height:50px;
		border:1px solid red;
		}
		.border{
		border:1px solid blue;
		}
	</style>
</head>

<body>
	<div id="app">
	<div :class="{active:isActive,border:isBorder}">对象形式</div>
	<div :class="[activeClass,borderClass]">数组形式</div>
	<button @click="handle">切换</button>
	</div>
	<script>
	var vm=new Vue({
	el:'#app',
	data:{
	isActive:true,
	isBorder:true,
	activeClass:'active',
	borderClass:'border',
	},
	methods:{
		handle(){
		this.isActive=!this.isActive;
		this.isBorder=!this.isBorder;
		this.activeClass='';
		this.borderClass='';
		}
	}
	
	})
	</script>
</body>

</html>